import { useRef, useState, memo, useCallback } from 'react'
// import { useMemo } from 'react'
import React from 'react'
import Input from './Input'
import List from './List'

//如所使用setState连续更新 
//=>合并=>统一更新，留最后一次！！！！！！！！

//this.setState({num:this.state.num+1});
//this.setState({num:this.state.num+1});
//this.setState({num:this.state.num+1});
//连续多次之后，之躯最后一次加一

//this.setState((state)=>{num:this.state.num+1});
//this.setState((state)=>{num:this.state.num+1});
//this.setState((state)=>{num:this.state.num+1});
//每次运行均有结果，且不会合并，拿到的原型数据

//拿数据就在setState()回调函数中

/*
没有key值
更新前:
索引 li 内容
1   li 1    input
2   li 2    input
更新后：
1   li 4
2   li 1
3   li 2

有key值：

没有key值，新添加的4成为索引1，，原序列索引向后偏移
有key值（唯一值），新的直接创建，其余相同直接复用

*/
//进行逆序添加，不使用索引作为key值
//页面有输入类的input框，不使用索引作为key值




//属性比较
const Demo = memo((props) => {
    console.log('demo re-render')
    return (
        <h1>Demo todo{props.title}</h1>
    )
})



//类中声明可以不加关键字const等，直接添加属性
//函数必须要有

//组件概念：
//    state
//    props
//相当于闭包，会重新声明
const ToDoList = () => {
    //函数组件中声明状态
    const [list, setList] = useState([1]);//默认undefined
    // const val = useMemo(
    //     () => {
    //         console.log('useMemo');
    //         return () => { }
    //     },
    //     [])
    const myref = useRef();

    const addItem = useCallback(
        (e) => {
            if (e.keyCode === 13) {
                // setList((前一个状态)=>{返回值是新状态})
                // setList((a)=>[{title:e.target.value,id:Date.now()}, ...a])
                myref.current = list;

                // setList([{title:e.target.value,id:Date.now()}, ...list])
                setList([{ title: e.target.value, id: Date.now() }, ...myref.current]);
                console.log(myref.current)
            }
        },
        [list])
    // console.log('todolist')


    return (
        <div>
            <h1>ToDoList</h1>
            <Input addItem={addItem} />
            <List list={list} />
            <Demo />
        </div>
    )
}

export default ToDoList

//当前函数内声明一次
//list return 


//有关闭包
//函数套函数 => 闭包
// const fn = () =>{
//     let num = 100;
//     return ()=>{
//         num++;
//         console.log(num);
//     }
// }
// let f1 = fn();
// f1();//101
// f1();//102
// let f2 = fn();
// f2();//101

// f1 = f2;
// f1();//102

let num;
const fn = (a) => {
    num = a;
    return () => {
        num++;
        console.log(num);
    }
}
let f1 = fn(0);
f1();//1
f1();//2
let f2 = fn(10);
f2();//11

f1 = f2;
f1();//12
